<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>点名</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
    <link rel="stylesheet" href="/public/static/css/main.css">
    <link rel="stylesheet" href="/public/static/css/pickout.css">
    <link rel="stylesheet" href="/public/static/css/centermenu.css">
    <link rel="stylesheet" href="/public/static/css/animate.css">
</head>
<style>
    .ul-centermenu{
        /*width: 200px;
        margin: 0 auto;*/
        justify-content: space-between;
        -webkit-justify-content: space-between;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    /*.ul-centermenu li{
      width: 100%;
      text-align: center;
      margin-bottom: 15px;
    }*/

</style>
<body>
<input type="hidden" value="{$classID}" id="classID">
<input type="hidden" value="{$callTime}" id="callTime">
<input type="hidden" value="{$teachID}" id="teachID">
<div class="main-container">
    <div class="main-wrapper">
        <section class="section teacher-section">
            <div id="model" class="form" >
                <div class="row section-header ">
                    <img src="/public/static/images/head.jpg" style="width: 70px; height: 70px; border-radius: 50px;">
                    <div class="column">
                        <div class="teacher-name">Masyn</div>
                        <div class="teacher-belong">天津触手科技</div>
                    </div>
                </div>
                <div class="row class-intro">{$classID}  {$callTime}  36名学生</div>
                <div id="stu-box" >
                    <ul class="ul-centermenu row wrap">

                    </ul>
                </div>
                <!-- <div class="input-group resize">
                  <input type="text" name="input-code"  style="color: #4E4E4E;" disabled="">
                </div>
                <div class="input-group resize">
                    <select name="className" id="className" class="className pickout" placeholder="请选择班级: ">
                            </select>
                </div>

                <div class="input-group resize">
                    <select name="classTime" id="classTime" class="classTime pickout" placeholder="请选择点名时间段: " title="Masyn">

                                <option value="早课">早课</option>
                                <option value="晚课">晚课</option>
                            </select>
                </div> -->

                <button id="screening-btn" class="submit-btn" type="button" data-for-form="model">结束点名</button>

            </div>
        </section>
    </div>
</div>
<script src="/public/vendor/jquery-1.10.2.min.js" charset="utf-8"></script>
<script src="/public/vendor/layer/mobile/layer.js" charset="utf-8"></script>
<script src="/public/vendor/jweixin-1.0.0.js" charset="utf-8"></script>
<script src="/public/static/js/main.js" charset="utf-8"></script>
<script src="/public/vendor/pickout.min.js" charset="utf-8"></script>
<script src="/public/vendor/centermenu.js" charset="utf-8"></script>
<script>
    var resData = [];
    function lalert(msg) {
        layer.open({
            content: msg,
            skin: 'msg',
            time: 2
        });
    }

    var $centermenu = $('.ul-centermenu');

    function centermenu0(option){
        var $clickedLi = $(option);
        console.log('ID:' + $clickedLi.attr('data-id') + '  ' + 'State:' + $clickedLi.attr('data-state'))
        $('body').centermenu({
            animateIn:'fadeInDownBig-hastrans',
            animateOut:'fadeOutDownBig-hastrans',
            hasLineBorder:false,
            duration:600,
            source:['已接收','未接收','请假'],
            liWidth:300,
            liHeight:50,
            click:function(ret){
                $clickedLi.attr('data-state',ret.index);
                $clickedLi.attr('data-state') == 0 ? $clickedLi.css("background-color","#EFEFEF") : $clickedLi.css("background-color","#ED6411")
                $clickedLi.attr('data-state') == 1 ? '' : $clickedLi.css("background-color","#1978FB")

                //这里的showMessage是调用的另一个插件  toast

                resData[$clickedLi.attr('data-row')].StuStat = $clickedLi.attr('data-state')
//                console.log(resData[$clickedLi.attr('data-row')])
                console.log('State:' + $clickedLi.attr('data-state'));
//                console.log(ret)

            }
        });
    }
    $('#screening-btn').on('click',function () {
        console.log("resData:")
        console.log(resData);

        $.ajax({
            url: 'http://callname.tunnel.echomod.cn/index/call/setCallInfo',
            data:JSON.stringify({
                resData:resData
            }),
            type:'POST',
            dataType: 'json',
            contentType: 'application/json',
            success: function(res) {
                console.log(res);
                window.location="http://callname.tunnel.echomod.cn/index/call";
            }
        });
    })

    $.ajax({
        url: 'http://callname.tunnel.echomod.cn/index/callInfo',
        data:JSON.stringify({
            teachID: $('#teachID').val(),
            classID: $('#classID').val(),
            callTime: $('#callTime').val()
        }),
        type:'POST',
        dataType: 'json',
        contentType: 'application/json',
        success: function(res) {
            console.log(res);

            resData = res;

            for (var i = 0; i < resData.length; i++) {

                $centermenu.append('<li class="stu-item centermenu" data-id="' + resData[i].StuID + '" data-state="' + resData[i].StuStat + '" data-row="' + i + '" onclick="centermenu0(this)">' + resData[i].Name + '</li>')
            }
        }
    });



    // function GetQueryString(name) {
    //  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");

    //  var r = window.location.search.substr(1).match(reg);
    //  if (r!=null) return (r[2]); return null;
    // }


</script>
</body>
</html>
